import React, { Component } from 'react'

import { Modal, Form, Select, Input } from 'antd'
// import PropTypes from 'prop-types'

import UploadAvatar from './uploadAvatar'

const { Option } = Select
const { TextArea } = Input
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}
class StaffEditModalForm extends Component {
  constructor (props) {
    super(props)
    this.state = {
    }
  }

  handleOk = () => {
    const { detail, onOk } = this.props
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk({
          userId: detail.userId,
          ...values
        })
      }
    })
  }

  handleCancel = () => {
    const { onCancel, form } = this.props
    form.resetFields()
    onCancel()
  }

  render () {
    const { form, visible = false, departmentList = [], roleOptions = [], detail } = this.props
    const { avatar, name, mobile, email, deptId, roleId, workNumber, remark } = detail || {}
    const { getFieldDecorator } = form

    if (detail && detail.userId) {
      return (
        <Modal
          title='编辑成员'
          visible={visible}
          width={600}
          onOk={this.handleOk}
          onCancel={() => this.handleCancel()}
        >
          <Form {...formItemLayout}>
            <Form.Item label='头像'>
              {getFieldDecorator('avatar', {
                rules: [{ required: true, message: '请上传头像' }],
                initialValue: avatar
              })(<UploadAvatar />)}
            </Form.Item>
            <Form.Item label='成员姓名'>
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入成员姓名' }],
                initialValue: name
              })(
                <Input placeholder='请输入' />
              )}
            </Form.Item>
            <Form.Item label='手机号'>
              {getFieldDecorator('mobile', {
                rules: [{ required: true, message: '请输入成员手机号' }],
                initialValue: mobile
              })(<Input placeholder='手机号' />)}
            </Form.Item>
            <Form.Item label='邮箱'>
              {getFieldDecorator('email', {
                rules: [{ required: true, message: '请输入成员邮箱' }, { type: 'email', message: '请输入正确的邮箱' }],
                initialValue: email
              })(<Input placeholder='邮箱' />)}
            </Form.Item>
            <Form.Item label='所属部门' help='选择所属部门后默认继承部门权限，可在成员列表中单独设置权限'>
              {getFieldDecorator('deptId', {
                rules: [{ required: true, message: '请选择部门' }],
                initialValue: deptId
              })(
                <Select placeholder='请选择'>
                  {
                    departmentList && departmentList.map(item => <Option key={item.value} value={item.value}>{item.text}</Option>)
                  }
                </Select>
              )}
            </Form.Item>
            <Form.Item label='角色'>
              {getFieldDecorator('roleId', {
                rules: [{ required: true, message: '请选角色' }],
                initialValue: roleId
              })(
                <Select placeholder='请选择'>
                  {
                    roleOptions && roleOptions.map(item => <Option key={item.value} value={item.value}>{item.text}</Option>)
                  }
                </Select>
              )}
            </Form.Item>
            <Form.Item label='登陆账号'>
              {getFieldDecorator('workNumber', {
                rules: [{ required: true, message: '请输入' }],
                initialValue: workNumber
              })(
                <Input placeholder='请输入' />
              )}
            </Form.Item>
            <Form.Item label='备注信息'>
              {getFieldDecorator('remark', {
                initialValue: remark
              })(
                <TextArea placeholder='请输入' />
              )}
            </Form.Item>
          </Form>
        </Modal>
      )
    } else {
      return null
    }
  }
}

StaffEditModalForm.propTypes = {
}

const StaffEditModal = Form.create()(StaffEditModalForm)
export default StaffEditModal
